<template>
  <div class="menu-warp">
    <div class="menu-left">
      <img src="@/assets/logo.png" alt srcset />
    </div>
    <div class="menu-right">
      <Menu mode="horizontal" theme="dark" active-name="1">
        <div class="layout-logo">欢迎登陆车联网远程服务系统!</div>
        <div class="layout-nav">
          <MenuItem name="1" to="/home">
            <Icon type="md-car" />车辆监控
          </MenuItem>
          <MenuItem name="2" to="/home/statisticalAnalysis">
            <Icon type="ios-stats" />
统计分析
          </MenuItem>
          <Submenu name="3">
            <template slot="title">
              <Icon type="md-cog" />系统设置
            </template>
            <MenuGroup title="警情">
              <MenuItem name="3-1" to="/home/alarmSetting">警情设置</MenuItem>
            </MenuGroup>
            <MenuGroup title="车辆">
              <MenuItem name="3-2" to="/home/bindCar">绑定车辆</MenuItem>
              <MenuItem name="3-3" to="/home/carGroup">车辆组管理</MenuItem>
            </MenuGroup>
            <MenuGroup title="其他">
              <MenuItem name="3-5" to="/home/userRole">角色管理</MenuItem>
              <MenuItem name="3-4" to="/home/acountSetting">账户设置</MenuItem>
            </MenuGroup>
          </Submenu>
          <MenuItem name="7">
            <Icon type="md-map" />地图管理
          </MenuItem>
          <MenuItem name="4">
            <Icon type="ios-desktop" />大屏显示
          </MenuItem>
          <MenuItem name="5">
            <Icon type="ios-paper-plane" />警情服务
          </MenuItem>
          <MenuItem name="7">
            <Icon type="ios-contact" />我的
          </MenuItem>
          <MenuItem name="6">
            <span @click="confirm" class="logout-box">
              <a>
                <Icon type="md-power" />
              </a>
            </span>
          </MenuItem>
        </div>
      </Menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainMenu",
  methods: {
    confirm() {
      this.$Modal.confirm({
        title: "退出",
        content: "<p>确认退出登录</p>",
        onOk: () => {
          this.$router.push("login");
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style scoped>
.menu-left {
  background-color: white;
  color: #2b85e4;
  font-size: 1.5em;
  flex: 1;
  font-weight: bold;
}
.menu-left img {
  width: 100%;
  height: 100%;
}
.menu-right {
  flex: 5;
  box-shadow: -2px 6px 21px #cccccc;
  z-index: 101;
}
.menu-right ul {
  line-height: 48px;
  height: 48px;
  background: #2d8cf0;
}
.menu-warp {
  color: white;
  display: flex;
  height: 100%;
}
.layout {
  border: 1px solid #d7dde4;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  color: white;
  font-size: 1.5em;
  height: 30px;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 0;
  left: 20px;
  font-weight: bold;
}
.layout-nav {
  float: right;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
.layout-header {
  padding: 0;
  border: none;
  background-color: #2b85e4;
}
.logout-box {
  color: white;
  float: right;
}
a:hover,
a:visited,
a:link,
a:active,
a {
  text-decoration: none;
  color: white;
}
.diliver {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  margin: 10px 0;
  clear: both;
  border-top: #d7dde4 1px solid;
}
</style>